<template>
  <div class="avue-crud">
    <el-dialog
      :title="'日报表'"
      :close-on-click-modal="false"
      :visible.sync="isEdit"
      width="60%"
    >
      <el-row style="margin-bottom: 14px; padding-left: 60px">
        <span>SN码：</span>
        <el-select
          v-model="snVal"
          placeholder="是否启用"
          clearable
          style="width: 190px; margin-left: 12px"
          @change="handleChangeSn"
        >
          <el-option
            v-for="dict in snList"
            :key="dict.value"
            :label="dict.snCode"
            :value="dict.inspectionId"
          />
        </el-select>
      </el-row>
      <el-form
        :model="dailyReportForm"
        ref="dailyReportForm"
        :rules="rules"
        :inline="true"
        label-width="120px"
      >
        <el-form-item label="项目名称" prop="productName">
          <el-input
            v-model="dailyReportForm.productName"
            placeholder="请输入项目名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="规格型号" prop="productSpec">
          <el-input
            v-model="dailyReportForm.productSpec"
            placeholder="请输入规格型号"
          ></el-input>
        </el-form-item>
        <el-form-item label="生产编码" prop="workorderCode">
          <el-input
            v-model="dailyReportForm.workorderCode"
            placeholder="请输入生产编码"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品编码" prop="productCode">
          <el-input
            v-model="dailyReportForm.productCode"
            placeholder="请输入产品编码"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="线别"
          v-if="dailyReportForm.mdLine && dailyReportForm.mdLine.lineName"
          :prop="dailyReportForm.mdLine.lineName"
        >
          <el-input v-model="dailyReportForm.mdLine.lineName"></el-input>
        </el-form-item>
        <el-form-item label="线别" v-else>
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="日期" prop="createTime">
          <el-input
            v-model="dailyReportForm.createTime"
            placeholder="请输入日期"
          ></el-input>
        </el-form-item>
        <el-form-item label="合同号" prop="ftext4">
          <el-input
            v-model="dailyReportForm.ftext4"
            placeholder="请输入合同号"
          ></el-input>
        </el-form-item>
        <el-form-item label="技术分解单号" prop="ftext1">
          <el-input
            v-model="dailyReportForm.ftext1"
            placeholder="请输入技术分解单号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
      <!-- 文字 -->
      <div style="margin-left: 15px">
        <p>
          1、开线生产后，一般检验项目按2H/次频次进行巡线抽检，带有特性符号的检验项目（▲）按1H/次频次巡检抽检。
        </p>
        <p>
          2、在巡检记录中填写对应产品流程单相应工序处，按抽检结果在巡检记录中相应位置画“√”或“×”，当天没有进行作业的项目画“/”。
        </p>
        <p>
          3、出现检验不良时，在异常记录中填写信息，不良品按《不合格品控制程序》处理。
        </p>
      </div>
      <!-- table1 -->
      <el-table
        v-loading="loading1"
        :data="projectList"
        style="margin-top: 20px"
      >
        <el-table-column
          label="项目类型"
          width="150px"
          align="center"
          prop="indexTypeName"
        ></el-table-column>
        <el-table-column
          label="项目内容"
          width="150px"
          align="center"
          prop="indexName"
        ></el-table-column>
        <el-table-column
          label="备注"
          width="150px"
          align="center"
          prop=""
        ></el-table-column>
        <el-table-column
          label="检查结果"
          width="150px"
          align="center"
          prop=""
        ></el-table-column>
      </el-table>
      <!-- table2 -->
      <el-table v-loading="loading2" :data="tableList" style="margin-top: 20px">
        <el-table-column
          label="项目类型"
          width="150px"
          align="center"
          prop="indexTypeName"
        />
        <el-table-column
          label="检查内容"
          width="150px"
          align="center"
          prop="indexName"
        />
        <el-table-column
          class="mytd"
          label="8:30"
          width="150px"
          align="center"
          prop="check8ResultesultSn"
        />
        <el-table-column
          class="mytd"
          label="9:30"
          width="150px"
          align="center"
          prop="check9ResultesultSn"
        />
        <el-table-column
          class="mytd"
          label="10:30"
          width="150px"
          align="center"
          prop="check10ResultesultSn"
        />
        <el-table-column
          class="mytd"
          label="11:30"
          width="150px"
          align="center"
          prop="check11ResultesultSn"
        />
        <el-table-column
          class="mytd"
          label="13:30"
          width="150px"
          align="center"
          prop="check13ResultesultSn"
        />
        <el-table-column
          class="mytd"
          label="14:30"
          width="150px"
          align="center"
          prop="check14ResultesultSn"
        />
        <el-table-column
          class="mytd"
          label="15:30"
          width="150px"
          align="center"
          prop="check15ResultesultSn"
        />
        <el-table-column
          class="mytd"
          label="16:30"
          width="150px"
          align="center"
          prop="check16ResultesultSn"
        />
        <el-table-column
          class="mytd"
          label="18:00"
          width="150px"
          align="center"
          prop="check18ResultesultSn"
        />
        <el-table-column
          class="mytd"
          label="19:00"
          width="150px"
          align="center"
          prop="check19ResultesultSn"
        />

        <!-- <el-table-column label="8:30" width="150px" align="center" prop="check8Result" >
                <template slot-scope="scope">
                    {{ scope.row.check8Result==1?"√":scope.row.check8Result==0?"x":scope.row.check8Result==2?"/":scope.row.check8Result }}
                </template>
            </el-table-column>>
            <el-table-column label="9:30" width="150px" align="center" prop="check9Result" >
                <template slot-scope="scope">
                  {{ scope.row.check9Result==1?"√":scope.row.check9Result==0?"x":scope.row.check9Result==2?"/":scope.row.check9Result }}
                </template>
            </el-table-column>>
            <el-table-column label="10:30" width="150px" align="center" prop="check10Result" >
                <template slot-scope="scope">
                  {{ scope.row.check10Result==1?"√":scope.row.check10Result==0?"x":scope.row.check10Result==2?"/":scope.row.check10Result }}
                </template>
            </el-table-column>
            <el-table-column label="11:30" width="150px" align="center" prop="check11Result" >
                <template slot-scope="scope">
                  {{ scope.row.check11Result==1?"√":scope.row.check11Result==0?"x":scope.row.check11Result==2?"/":scope.row.check11Result }}
                </template>
            </el-table-column>
            <el-table-column label="13:30" width="150px" align="center" prop="check13Result" >
                <template slot-scope="scope">
                  {{ scope.row.check13Result==1?"√":scope.row.check13Result==0?"x":scope.row.check13Result==2?"/":scope.row.check13Result }}
                </template>
            </el-table-column>
            <el-table-column label="14:30" width="150px" align="center" prop="check14Result" >
                <template slot-scope="scope">
                  {{ scope.row.check14Result==1?"√":scope.row.check14Result==0?"x":scope.row.check14Result==2?"/":scope.row.check14Result }}
                </template>
            </el-table-column>
            <el-table-column label="15:30" width="150px" align="center" prop="check15Result" >
                <template slot-scope="scope">
                  {{ scope.row.check15Result==1?"√":scope.row.check15Result==0?"x":scope.row.check15Result==2?"/":scope.row.check15Result }}
                </template>
            </el-table-column>
            <el-table-column label="16:30" width="150px" align="center" prop="check16Result" >
                <template slot-scope="scope">
                  {{ scope.row.check16Result==1?"√":scope.row.check16Result==0?"x":scope.row.check16Result==2?"/":scope.row.check16Result }}
                </template>
            </el-table-column>
            <el-table-column label="18:00" width="150px" align="center" prop="check18Result" >
                <template slot-scope="scope">
                  {{ scope.row.check18Result==1?"√":scope.row.check18Result==0?"x":scope.row.check18Result==2?"/":scope.row.check18Result }}
                </template>
            </el-table-column>
            <el-table-column label="19:00" width="150px" align="center" prop="check19Result" >
                <template slot-scope="scope">
                    {{ scope.row.check19Result==1?"√":scope.row.check19Result==0?"x":scope.row.check19Result==2?"/":scope.row.check19Result }}
                </template>
            </el-table-column> -->
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import {
  getForm,
  gettableData,
  getTimeData,
  snCodeListByInspectioIds,
  dailyReportTexport,
} from "@/api/mes/qc/qcipqc";
import { blobValidate } from "@/utils/hici";
import { Message, Loading } from "element-ui";
import { saveAs } from "file-saver";
let downloadLoadingInstance;
export default {
  data() {
    return {
      timeArr: [19, 18, 16, 15, 14, 13, 11, 10, 9, 8],
      snVal: null,
      snList: [],
      isEdit: false,
      //这条数据的id
      // Id: "",
      dailyReportForm: {
        mdLine: {},
      },
      // 遮罩层1
      loading1: false,
      //中间的table
      projectList: [],
      //下面的table
      tableList: [],
      // 遮罩层2
      loading2: false,
      rules: {
        // 注意这里
        "mdLine.lineName": [
          { required: true, message: "请输入产线", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
      workorderCode: null,
      checkTime: null,
      tableList2: [],
      activeSn: null,
    };
  },
  methods: {
    handleExport() {
      let param = {
        ipqcInspectionBase: this.dailyReportForm, //第一个接口返回结果集
        templateIndexList: this.projectList, //第二个接口返回结果集
        detailList: this.tableList2, //第三个接口返回结果集
        snCode: this.activeSn, //当前选择的SN码
      };
      downloadLoadingInstance = Loading.service({
        text: "正在下载数据，请稍候",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      dailyReportTexport(param)
        .then(async (data) => {
          const isBlob = blobValidate(data);
          if (isBlob) {
            const blob = new Blob([data]);
            saveAs(blob, `IPQC巡检日报表.xlsx`);
          } else {
            const resText = await data.text();
            const rspObj = JSON.parse(resText);
            const errMsg =
              errorCode[rspObj.code] || rspObj.msg || errorCode["default"];
            Message.error(errMsg);
          }
          downloadLoadingInstance.close();
        })
        .catch((r) => {
          console.error(r);
          Message.error("下载文件出现错误，请联系管理员！");
          downloadLoadingInstance.close();
        });
    },
    handleChangeSn(val) {
      this.snList.forEach((item) => {
        if (item.inspectionId === val) {
          this.activeSn = item.snCode;
        }
      });
      getForm(val).then((res) => {
        if (res.code == 200) {
          this.dailyReportForm = res.data;
          this.gettableList();
          this.gettableList2();
        }
      });
    },
    init(isEdit, row) {
      this.workorderCode = row.workorderCode;
      this.checkTime = row.checkTime;
      let param = {
        workorderCode: row.workorderCode,
        checkTime: row.checkTime,
      };
      snCodeListByInspectioIds(param).then((res) => {
        console.log(res);
        this.snList = res.data ? res.data : [];
        if (this.snList.length) {
          this.activeSn = this.snList[0].snCode;
          this.snVal = this.snList[0].inspectionId;
          getForm(this.snVal).then((res) => {
            if (res.code == 200) {
              this.dailyReportForm = res.data;
              this.gettableList();
              this.gettableList2();
            }
          });
        }
      });
      this.isEdit = isEdit;
      // this.Id = row.id
    },
    gettableList() {
      let param = {
        productType: this.dailyReportForm.productType,
        type: 1,
      };
      gettableData(param).then((res) => {
        console.log(res, "table1的res");
        if (res.code == 200) {
          this.projectList = res.data;
        }
      });
    },
    gettableList2() {
      let param = {
        inspectionId: this.snVal,
      };
      getTimeData(param).then((res) => {
        console.log(res, "下面table的res");
        if (res.code == 200) {
          const data = res.data ? res.data : [];
          this.tableList2 = JSON.parse(JSON.stringify(data));
          let arr = [];
          data.forEach((item) => {
            let obj1 = JSON.parse(JSON.stringify(item));
            let obj2 = JSON.parse(JSON.stringify(item));
            this.setStr(obj1, item);
            // obj1.check8ResultesultSn =
            //   item.check8Result == 1
            //     ? "√"
            //     : item.check8Result == 0
            //     ? "x"
            //     : item.check8Result == 2
            //     ? "/"
            //     : item.check8Result;
            // obj1.check9ResultesultSn =
            //   item.check9Result == 1
            //     ? "√"
            //     : item.check9Result == 0
            //     ? "x"
            //     : item.check9Result == 2
            //     ? "/"
            //     : item.check9Result;
            // obj1.check10ResultesultSn =
            //   item.check10Result == 1
            //     ? "√"
            //     : item.check10Result == 0
            //     ? "x"
            //     : item.check10Result == 2
            //     ? "/"
            //     : item.check10Result;
            // obj1.check11ResultesultSn =
            //   item.check11Result == 1
            //     ? "√"
            //     : item.check11Result == 0
            //     ? "x"
            //     : item.check11Result == 2
            //     ? "/"
            //     : item.check11Result;
            // obj1.check13ResultesultSn =
            //   item.check13Result == 1
            //     ? "√"
            //     : item.check13Result == 0
            //     ? "x"
            //     : item.check13Result == 2
            //     ? "/"
            //     : item.check13Result;
            // obj1.check14ResultesultSn =
            //   item.check14Result == 1
            //     ? "√"
            //     : item.check14Result == 0
            //     ? "x"
            //     : item.check14Result == 2
            //     ? "/"
            //     : item.check14Result;
            // obj1.check15ResultesultSn =
            //   item.check15Result == 1
            //     ? "√"
            //     : item.check15Result == 0
            //     ? "x"
            //     : item.check15Result == 2
            //     ? "/"
            //     : item.check15Result;
            // obj1.check16ResultesultSn =
            //   item.check16Result == 1
            //     ? "√"
            //     : item.check16Result == 0
            //     ? "x"
            //     : item.check16Result == 2
            //     ? "/"
            //     : item.check16Result;
            // obj1.check18ResultesultSn =
            //   item.check18Result == 1
            //     ? "√"
            //     : item.check18Result == 0
            //     ? "x"
            //     : item.check18Result == 2
            //     ? "/"
            //     : item.check18Result;
            // obj1.check19ResultesultSn =
            //   item.check19Result == 1
            //     ? "√"
            //     : item.check19Result == 0
            //     ? "x"
            //     : item.check19Result == 2
            //     ? "/"
            //     : item.check19Result;
            arr.push(obj1);
          });
          if (data.length) {
            let item = JSON.parse(JSON.stringify(data[0]));
            let obj2 = item;
            obj2.check8ResultesultSn = item.sn8Code;
            obj2.check9ResultesultSn = item.sn9Code;
            obj2.check10ResultesultSn = item.sn10Code;
            obj2.check11ResultesultSn = item.sn11Code;
            obj2.check13ResultesultSn = item.sn13Code;
            obj2.check14ResultesultSn = item.sn14Code;
            obj2.check15ResultesultSn = item.sn15Code;
            obj2.check16ResultesultSn = item.sn16Code;
            obj2.check18ResultesultSn = item.sn18Code;
            obj2.check19ResultesultSn = item.sn19Code;
            obj2.indexTypeName = "SN码";
            obj2.indexName = "";
            // arr.unshift(obj2)
          }
          console.log(123, arr);
          this.tableList = arr;
        }
      });
    },
    setStr(obj, newCii) {
      console.log("---------");
      let str = "";
      if (newCii.except10Value1 || newCii.except10Value) {
        str = ` M:${
          newCii.except10Value1 ? newCii.except10Value1 : "(null)"
        } -- ${newCii.except10Value ? newCii.except10Value : "(null)"}`;
      }
      this.timeArr.forEach((item) => {
        obj[`check${item}ResultesultSn`] =
          newCii[`check${item}Result`] == 1
            ? `√ \n${str}`
            : newCii[`check${item}Result`] == 0
            ? `x \n${str}`
            : newCii[`check${item}Result`] == 2
            ? `/ \n${str}`
            : newCii[`check${item}Result`];
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mytd {
  white-space: pre-wrap;
}
</style>
